<template>
  <a-modal
    class="promote-modal"
    :visible="promoteVisible"
    :maskClosable="false"
    :destroyOnClose="true"
    :keyboard="false"
    :footer="null"
    title="推广"
    width="830px"
    @cancel="closeModal"
  >
    <a-spin tip="Loading..." :spinning="tableLoading">
      <a-tabs default-active-key="1" tab-position="left">
        <a-tab-pane key="1" tab="微信小程序">
          <div class="pane1">
            <div
              class="left"
              :style="{
                background: `url(${qrCode}) no-repeat 50% 50% /cover`,
              }"
            ></div>

            <div class="right">
              <div>微信小程序路径</div>
              <div>
                <a-input
                  style="width: 220px; border-radius: 4px 0 0 4px"
                  readOnly
                  :id="'copyUrl'"
                  v-model="url"
                />
                <a-button
                  style="border-radius: 0 4px 4px 0"
                  class="copyBtn"
                  type="primary"
                  @click="copywxtap"
                  :data-clipboard-target="'#copyUrl'"
                  >复制
                </a-button>
              </div>

              <div style="margin-top: 8px">用于微信公众号添加小程序</div>
              <div style="color: #016dff">
                <a-button
                  type="link"
                  @click="downloadIamge"
                  :loading="tableLoading"
                  >点击下载小程序码</a-button
                >
                <!-- <a :href="qrCode" download>点击下载小程序码</a> -->
              </div>
            </div>
          </div>
        </a-tab-pane>
      </a-tabs>
    </a-spin>
  </a-modal>
</template>
<script>
export default {
  name: "preview",
  props: {
    promoteVisible: {
      // 是否显示弹窗
      type: Boolean,
      default: false,
    },
    //活动Id
    promoteId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      tableLoading: false,
      qrCode: "",
      url: "pagesC/raffle/index",
    };
  },
  watch: {
    promoteVisible(y) {
      if (y) {
        this.getMiniCode();
        this.url = this.url + "?scene=" + this.promoteId;
      } else {
        this.qrCode = "";
        this.url = "pagesC/raffle/index";
        this.tableLoading = false;
      }
    },
  },
  methods: {
    closeModal() {
      this.$emit("cancel");
    },
    //获取二维码
    async getMiniCode() {
      this.tableLoading = true;
      let res = await this.$get(
        "goldenhome/gh/lottery/admin_/lottery/activity/qrcode",
        {
          activityId: this.promoteId,
        }
      ).catch(() => {
        this.tableLoading = false;
      });
      if (res && res.returnCode == 1000) {
        this.qrCode = res.dataInfo;
        this.tableLoading = false;
      } else {
        this.tableLoading = false;
      }
    },
    copywxtap() {
      var input = document.createElement("input"); // 直接构建input
      input.value = this.url; // 设置内容
      document.body.appendChild(input); // 添加临时实例
      input.select(); // 选择实例内容
      document.execCommand("Copy"); // 执行复制
      document.body.removeChild(input); // 删除临时实例
      this.$message.success("复制成功");
    },
    downloadIamge() {
      var x = new XMLHttpRequest();
      x.open("GET", this.qrCode, true);
      x.responseType = "blob";
      x.onload = function (e) {
        //会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
        var url = window.URL.createObjectURL(x.response);
        var a = document.createElement("a");
        a.href = url;
        a.download = "抽奖活动微信小程序码.png";
        a.click();
      };
      x.send();
    },
  },
};
</script>
<style lang="less" scoped>
.pane1 {
  display: flex;

  .left {
    /*position: relative;*/
    width: 300px;
    height: 300px;
    /*border:1px solid black;*/
    /*background-color: lightblue;*/

    // background: url("~@/assets/rightCard/bg_saomalingka@3x.png");
    // background-size: 100% 100%;
  }

  .right {
    margin-left: 20px;
  }
  .copyBtn {
    padding: 0 10px;
  }
}
</style>